<template>
  <div>
    <MainNavBar class="main-nav" id="main-nav">
      <template #center-name> 竞赛规程 </template>
    </MainNavBar>
    <div class="container">
      <div class="header" id="header">
        <div class="cloud-top">
          <img src="http://qnticao.laigl.com/vue/cloud-top.png" alt="云朵" />
        </div>
        <div class="cloud-left">
          <img src="http://qnticao.laigl.com/vue/cloud-left.png" alt="云朵" />
        </div>
        <div class="cloud-right">
          <img src="http://qnticao.laigl.com/vue/cloud-right.png" alt="云朵" />
        </div>
        <div class="top">
          <!-- 全国首届体操通级比赛
          <br />暨全国亲子体操比赛 -->
          <img
            src="../../assets/images/141b2f935e84fef5248ad72197ff91e.png"
            alt=""
          />
        </div>
        <div class="date">2021年6月1日——12月31日</div>
        <div class="glass"></div>
      </div>

      <!-- <div class="info_a" v-if="sticky">
        <div class="nav-bar">
          <div
            class="intro"
            :class="{ active: currentIndex === 0 }"
            @click="handleChangeIndex(0)"
          >
            赛事介绍
          </div>
          <div
            class="action"
            :class="{ active: currentIndex === 1 }"
            @click="handleChangeIndex(1)"
          >
            动作要求
          </div>
        </div>
      </div> -->

      <div class="info_b">
        <!-- <div class="nav-bar">
          <div
            class="intro"
            :class="{ active: currentIndex === 0 }"
            @click="handleChangeIndex(0)"
          >
            赛事介绍
          </div>
          <div
            class="action"
            :class="{ active: currentIndex === 1 }"
            @click="handleChangeIndex(1)"
          >
            动作要求
          </div>
        </div> -->
        <van-sticky :offset-top="offsetTop">
          <div class="info_c">
            <div class="nav-bar">
              <div
                class="intro"
                :class="{ active: currentIndex === 0 }"
                @click="handleChangeIndex(0)"
              >
                赛事介绍
              </div>
              <div
                class="action"
                :class="{ active: currentIndex === 1 }"
                @click="handleChangeIndex(1)"
              >
                动作要求
              </div>
            </div>
          </div>
        </van-sticky>

        <div
          v-if="currentIndex === 0"
          v-for="item in introList"
          :key="item.id"
          style="margin-top: 8.267vw"
        >
          <div class="item">
            <div class="title"><span>赛事名称</span></div>
            <div class="detail">
              <!-- 国家体育总局体操运动管理中心<br />中国体操协会 -->
              {{ item.name }}
            </div>
          </div>
          <div class="item">
            <div class="title"><span>主办单位</span></div>
            <div class="detail">
              <!-- 国家体育总局体操运动管理中心<br />中国体操协会 -->
              {{ item.organizer }}
              <br />{{ item.organizer1 }}
            </div>
          </div>
          <div class="item">
            <div class="title"><span>承办单位</span></div>
            <div class="detail">{{ item.undertake }}</div>
          </div>
          <div class="item">
            <div class="title"><span>协办单位</span></div>
            <div class="detail">杨我国威运动俱乐部</div>
          </div>
          <div class="item">
            <div class="title"><span>竞赛时间与地点</span></div>
            <div class="detail">
              <!-- 竞赛时间：2021年6月1日——12月31日 -->
              竞赛时间：{{ item.start_date }} — {{ item.end_date }}
              <br />竞赛地点：<br />
              1.线下：全国各省市体校、小学、幼儿园、俱乐部及相关参赛单位场地。<br />
              2.线上：“扬我国威运动俱乐部服务号”小程序。
            </div>
          </div>
          <div class="item">
            <div class="title"><span>参赛办法</span></div>
            <div class="detail notext-indent" v-html="item.entry"></div>
          </div>
          <div class="item">
            <div class="title"><span>竞赛办法</span></div>
            <div class="detail notext-indent" v-html="item.race"></div>
          </div>
        </div>
        <div v-if="currentIndex === 1" class="requirement">
          <div class="type" @click="showType = true">
            <span>{{ currentStr || "&nbsp;&nbsp;&nbsp;&nbsp;" }}</span>
            <span
              ><img
                src="http://qnticao.laigl.com/vue/pullingDown2.png"
                alt="选择"
            /></span>
          </div>
          <div
            class="item"
            @click="goActionDetail(item)"
            v-for="item in actionList"
            :key="item.id"
            v-if="actionList.length > 0 && actionList[0] != null"
          >
            <div class="left">
              <img :src="item.img" alt="视频" />
              <img
                src="../../assets/images/277de9087669637703772013f0a832c.png"
                class="lock"
                alt="锁"
                v-if="item.status === 2"
              />
              <img
                src="http://qnticao.laigl.com/vue/Play.png"
                class="play"
                alt="播放"
              />
            </div>
            <div class="right">
              <div class="name">{{ item.name }}</div>
              <div class="duration"></div>
            </div>
          </div>
        </div>
        <div :class="{ mask: showMask }"></div>
        <p
          v-if="currentStr === '全国首届体操通级比赛' && currentIndex == 1"
          style="color: #fccf00; font-size: 3.733vw; padding-left: 6.4vw"
        >
          PS: 通级或购买后方能观看下一级别动作要求
        </p>
      </div>
    </div>
    <!-- 选择比赛类别 -->
    <van-popup v-model:show="showType" round position="bottom">
      <van-picker
        v-if="showType"
        title="请选择比赛类别"
        :columns="columns"
        @confirm="typeConfirm"
        @cancel="onCancel"
        :default-index="currentTypeIndex"
    /></van-popup>
    <van-popup
      v-model:show="payState.showSecurityProtocol"
      round
      :style="{ minHeight: '106.667vw', width: '88vw' }"
      :close-on-click-overlay="false"
      close-icon="close"
      closeable
      close-icon-position="top-right"
      class="popup"
    >
      <div class="wrapper">
        <div class="title">自愿参赛责任及风险告知书</div>
        <div class="tips">
          您好！在填写报名信息前请先仔细阅读参赛健康安全协议。
        </div>
        <div class="content">
          一、参赛选手及其监护人自愿报名参加“杨威杯”全国首届体操通级比赛暨全国亲子体操比赛。<br />
          二、参赛选手及其监护人愿意遵守比赛所有规则规定及采取的措施。<br />
          三、参赛选手及其监护人完全了解自己的身体状况，确认身体健康状况良好，已为参赛做好充分准备。<br />
          参赛运动员须在赛前由组队单位或个人自行购买意外伤害保险。如未购买，在比赛中发生意外伤害，由组队单位和参赛者自负。<br />
          四、参赛选手及其监护人充分了解本次线上比赛可能出现的风险，且已准备必要的防范措施，以对安全负责的态度参赛。<br />
          五、参赛选手及其监护人愿意承担赛事期间发生的意外风险责任。<br />
          六、参赛选手及其监护人同意大赛组委会以正当方式将上传的参赛作品和照片用于各项业务及项目宣传推广活动。<br />
          七、参赛选手及其监护人承诺以自己的名义参赛，决不冒名顶替。<br />
          八、参赛选手及其监护人已认真阅读并全面理解以上内容，报名参赛等于同意上述所有内容，且对上述所有内容予以确认并承担相应的法律责任。<br />
        </div>
        <div class="mask">
          <div class="bgc"></div>
        </div>
        <div class="next" @click="goPay">
          <span>去购买</span>
        </div>
        <!-- <div class="next">同意本协议并继续</div> -->
      </div>
    </van-popup>
  </div>
</template>

<script>
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import {
  computed,
  nextTick,
  onActivated,
  onMounted,
  onUnmounted,
  ref,
  reactive,
  watch,
} from "vue";
import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
import { request } from "@/network/request.js";
import { Toast } from "vant";
export default {
  components: {
    MainNavBar,
  },
  setup() {
    // 展示协议
    const payState = reactive({
      showSecurityProtocol: false,
      currentItem: {},
    });
    const route = useRoute();
    const router = useRouter();
    const currentIndex = ref(0);
    const showType = ref(false);
    const showMask = ref(true);
    const actionList = ref([]);
    const introList = ref([]);
    const matchInfo = ref([]);
    const columns = ref([]);
    const currentStr = ref("");
    const sticky = ref(false);
    const offsetTop = ref(50);
    const currentTypeIndex = ref(0);
    const handleChangeIndex = (index) => {
      currentIndex.value = index;
      nextTick(() => {
        changeMask();
      });
    };
    const onCancel = () => {
      showType.value = false;
    };
    const typeConfirm = (value, index) => {
      // console.log(value);
      currentStr.value = value;
      currentTypeIndex.value = index;
      // console.log("在此发送网络请求");
      getSourceData();
      showType.value = false;
    };
    // 购买视频
    const goPay = () => {
      // isPaying.value = true;
      payState.showSecurityProtocol = false;
      router.push({
        path: "/uploadinfo",
        query: payState.currentItem,
      });
    };
    const getComputedStyle = () => {
      // main-nav
      return (
        window.parseFloat(
          window.getComputedStyle(document.querySelector(".container"), null)
            .height
        ) +
        window.parseFloat(
          window.getComputedStyle(document.querySelector("#main-nav")).height
        )
      );
    };
    const changeMask = () => {
      // 吸顶效果
      if (
        document.documentElement.scrollTop >
        parseFloat(
          window.getComputedStyle(document.querySelector("#header")).height
        ) +
          parseFloat(
            window.getComputedStyle(document.querySelector("#main-nav")).height
          ) -
          40
      ) {
        sticky.value = true;
      } else {
        sticky.value = false;
      }
      if (
        Math.abs(
          document.documentElement.scrollTop +
            document.documentElement.clientHeight -
            getComputedStyle()
        ) < 5
      ) {
        return (showMask.value = false);
      }
      showMask.value = true;
    };
    const isPaying = ref(false);
    const goActionDetail = (item) => {
      // if (isPaying.value === true) return;

      if (item.status === 2) {
        router.push({
          path: "/uploadinfo",
          query: {
            compet_id: item.compet_id,
            level_id: item.level_id,
            currentStr: currentStr.value,
          },
        });
      } else if (item.level_id >= 3) {
        router.push({
          path: "/Level3up",
          query: {
            compet_id: item.compet_id,
            level_id: item.level_id,
            currentStr: currentStr.value,
          },
        });
      } else {
        router.push({
          path: "/actionDetail",
          query: {
            id: item.id,
            currentStr: currentStr.value,
          },
        });
      }
    };
    const actionRequirementInfo = async () => {
      const res = await request({
        url: "v1/index/actionDetail",
        data: {
          compet_id: route.query.match_id ?? "",
          level_id: route.query.level_id ?? "",
          // compet_id:1,
          // level_id:1
        },
      });
      // console.log(res.data.rows);
      console.log(res.data.rows == null);
      if (res.data.rows == null) {
        Toast("暂无内容");
      }
      actionList.value.push(res.data.rows);
      // console.log(route.query.name);
      currentStr.value = route.query.name;
      getData();
      // console.log("准备渲染");
    };
    const getMatchIntro = async () => {
      const res = await request({
        url: "v1/competition/getcompetition",
        data: {
          page: 1,
        },
      });
      introList.value = res.data.rows;
    };
    const getData = async () => {
      const res = await request({
        url: "v1/index/getCompetition",
        data: {
          token: sessionStorage.getItem("token"),
        },
      });
      if (res.code === 200) {
        matchInfo.value = res.data.rows;
        // console.log(matchInfo.value);
        matchInfo.value.forEach((item) => {
          columns.value.push(item.name);
        });
        // console.log(route.query.currentStr);
        // console.log(route.query.currentStr==="全国亲子体操比赛");
        // console.log(route.query.name);
        if (!route.query.name || route.query.name === "全国首届体操通级比赛") {
          currentStr.value = columns.value[0];
          getSourceData();
        } else if (route.query.name === "全国亲子体操比赛") {
          currentStr.value = columns.value[1];
          getSourceData();
        }
        // else if(route.query.currentStr==="全国亲子体操比赛"){
        //   currentStr.value = columns.value[1];
        //   console.log(currentStr.value);
        //   getSourceData();
        // }
      } else {
        Toast(res.msg);
      }
    };
    const getSourceData = async () => {
      const arr = matchInfo.value.filter((item) => {
        return item.name === currentStr.value;
      });
      // console.log(arr[0]);
      const res = await request({
        // url: "v1/competition/getAction",
        url: "v1/competition/getActions",
        data: {
          compet_id: arr[0].id,
          page: 1,
          token: sessionStorage.getItem("token"),
        },
      });

      actionList.value = res.data.rows;
      // console.log(actionList.value);
    };
    const getDataInfo = async () => {
      const res = await request({
        url: "v1/competition/getcompetition",
      });
      if (res.code === 200) {
        introList.value.push(res.data.rows);
      } else {
        Toast(res.msg);
      }
    };

    onMounted(() => {
      if (route.query.currentIndex) {
        currentIndex.value = Number(route.query.currentIndex);
        // console.log("当前的动作类型：", route.query.type);
        actionRequirementInfo();
      } else {
        getData();
      }
      // getMatchIntro()
      getDataInfo();
      changeMask();
      window.addEventListener("scroll", changeMask);
      offsetTop.value = parseFloat(
        window.getComputedStyle(document.querySelector("#main-nav")).height
      );
    });
    onUnmounted(() => {
      window.removeEventListener("scroll", changeMask);
    });
    return {
      currentIndex,
      handleChangeIndex,
      offsetTop,
      showType,
      typeConfirm,
      onCancel,
      showMask,
      goActionDetail,
      actionList,
      introList,
      columns,
      currentStr,
      sticky,
      currentTypeIndex,
      payState,
      goPay,
    };
  },
  beforeRouteEnter(to, from, next) {
    console.log(from.query.currentStr);
    if (from.path === "/actionDetail" || from.path === "/uploadinfo" || from.path === "/Level3up") {
      // to.query.name = "全国亲子体操比赛"
      // console.log(12345);
      next((vm) => {
        vm.currentIndex = 1;
        // vm.$route.query.name =  from.query.currentStr
        vm.$route.query.name = from.query.currentStr;
      });
    }
    next();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: calc(100vh - 13.333vw);
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  background-repeat: repeat;
  background-color: #0054a6;
  // background-size: cover;
  background-size: 100% auto;
  position: relative;
  overflow: hidden;
  .top {
    width: 100vw;
    height: 20.267vw;
    padding-top: 11.467vw;
    font-size: 7.467vw;
    font-family: REEJI-BigYoung-BoldGB2.0-Regular, REEJI-BigYoung-BoldGB20;
    font-weight: 400;
    color: #ffffff;
    line-height: 10.133vw;
    text-align: center;
    margin-bottom: 1.333vw;
    img {
      width: 75%;
      vertical-align: middle;
    }
  }
  .date {
    // width: 49.867vw;
    height: 5.333vw;
    text-align: center;
    font-size: 3.733vw;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #fccf00;
    line-height: 5.333vw;
    margin: 0 auto;
  }
  .glass {
    width: 100%;
    height: 19.733vw;
    background-image: url("http://qnticao.laigl.com/vue/894785145b38fd57be6143765e755cc3.png");
    background-size: cover;
    background-repeat: no-repeat;
  }
  .info_a {
    position: fixed;
    left: 0;
    right: 0;
    top: 12.333vw;
    margin-top: -1.333vw;
    width: 100%;
    // min-height: calc(100vh - 13.333vw - 56.8vw);
    background-color: #fff;
    border-top-left-radius: 5.333vw;
    border-top-right-radius: 5.333vw;
    -webkit-appearance: none;
    overflow: hidden;
    z-index: 10;
    .nav-bar {
      // position: sticky;
      // left: 0;
      // right: 0;
      // top: 10.667vw;
      box-sizing: border-box;
      width: 100%;
      padding-right: 29.333vw;
      padding-left: 6.133vw;
      display: flex;
      margin-top: 6.933vw;
      margin-bottom: 4.267vw;
      font-size: 5.6vw;
      color: #ced3e0;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 7.733vw;
      height: 12.267vw;
      .intro,
      .action {
        width: 32vw;
        height: 100%;
        text-align: center;
        line-height: 12.267vw;
      }
      .active {
        color: #000;
        background-color: #f4f4f4;
        border-radius: 6.133vw;
        -webkit-appearance: none;
      }
    }
    .item {
      .title {
        display: inline-block;
        padding: 0 4.8vw;
        margin-left: 6.133vw;
        height: 3.733vw;
        background-color: #fccf00;
        transform: skew(-20deg);
        // text-align: center;
        line-height: 1.067vw;
        span {
          display: block;
          font-size: 4.267vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          // line-height: 5.867vw;
          transform: skew(20deg);
        }
      }
      .detail {
        box-sizing: border-box;
        padding: 3.2vw 7.733vw 4.267vw 0;
        margin-left: 11.467vw;
        font-size: 3.733vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 5.333vw;
        /deep/img {
          width: 100% !important;
          text-indent: 0 !important;
          height: auto !important;
        }
        &.notext-indent {
          margin-left: 5.867vw;
        }
      }
    }
  }
  .info_c {
    // position: fixed;
    // left: 0;
    // right: 0;
    // top: 12.333vw;
    margin-top: -1.333vw;
    width: 100%;
    // min-height: calc(100vh - 13.333vw - 56.8vw);
    background-color: #fff;
    border-top-left-radius: 5.333vw;
    border-top-right-radius: 5.333vw;
    -webkit-appearance: none;
    overflow: hidden;
    z-index: 10;
    .nav-bar {
      // position: sticky;
      // left: 0;
      // right: 0;
      // top: 10.667vw;
      box-sizing: border-box;
      width: 100%;
      padding-right: 29.333vw;
      padding-left: 6.133vw;
      display: flex;
      margin-top: 6.933vw;
      margin-bottom: 4.267vw;
      font-size: 5.6vw;
      color: #ced3e0;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 7.733vw;
      height: 12.267vw;
      .intro,
      .action {
        width: 32vw;
        height: 100%;
        text-align: center;
        line-height: 12.267vw;
      }
      .active {
        color: #000;
        background-color: #f4f4f4;
        border-radius: 6.133vw;
        -webkit-appearance: none;
      }
    }
    .item {
      .title {
        display: inline-block;
        padding: 0 4.8vw;
        margin-left: 6.133vw;
        height: 3.733vw;
        background-color: #fccf00;
        transform: skew(-20deg);
        // text-align: center;
        line-height: 1.067vw;
        span {
          display: block;
          font-size: 4.267vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          // line-height: 5.867vw;
          transform: skew(20deg);
        }
      }
      .detail {
        box-sizing: border-box;
        padding: 3.2vw 7.733vw 4.267vw 0;
        margin-left: 11.467vw;
        font-size: 3.733vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 5.333vw;
        /deep/img {
          width: 100% !important;
          text-indent: 0 !important;
          height: auto !important;
        }
      }
    }
  }
  .info_b {
    margin-top: -3.333vw;
    width: 100%;
    min-height: calc(100vh - 13.333vw - 54.8vw);
    background-color: #fff;
    border-top-left-radius: 5.333vw;
    border-top-right-radius: 5.333vw;
    -webkit-appearance: none;
    overflow: hidden;
    .nav-bar {
      // position: sticky;
      // left: 0;
      // right: 0;
      // top: 10.667vw;
      box-sizing: border-box;
      width: 100%;
      padding-right: 29.333vw;
      padding-left: 6.133vw;
      display: flex;
      margin-top: 4.933vw;
      margin-bottom: 2.267vw;
      font-size: 5.6vw;
      color: #ced3e0;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 7.733vw;
      height: 12.267vw;
      .intro,
      .action {
        width: 32vw;
        height: 100%;
        text-align: center;
        line-height: 12.267vw;
      }
      .active {
        color: #000;
        background-color: #f4f4f4;
        border-radius: 6.133vw;
        -webkit-appearance: none;
      }
    }
    .item {
      .title {
        display: inline-block;
        padding: 0 4.8vw;
        margin-left: 6.133vw;
        height: 3.733vw;
        background-color: #fccf00;
        transform: skew(-20deg);
        // text-align: center;
        line-height: 1.067vw;
        span {
          display: block;
          font-size: 4.267vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          // line-height: 5.867vw;
          transform: skew(20deg);
        }
      }
      .detail {
        box-sizing: border-box;
        padding: 3.2vw 7.733vw 4.267vw 0;
        margin-left: 11.467vw;
        font-size: 3.733vw;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 5.333vw;
        /deep/img {
          width: 100% !important;
          text-indent: 0 !important;
          height: auto !important;
        }
        &.notext-indent {
          margin-left: 5.867vw;
        }
      }
    }
  }
  .mask {
    pointer-events: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22.4vw;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.9) 100%
    );
  }
  .requirement {
    // margin-top: 8.267vw;
    margin-top: 5.567vw;
    padding: 0 6.4vw;
    padding-bottom: 10.667vw;
    min-height: 59.567vw;
    .type {
      height: 11.733vw;
      font-size: 4.267vw;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 11.733vw;
      margin-bottom: 5.867vw;
      span:nth-child(1) {
        padding-left: 20px;
        display: inline-block;
        height: 100%;
        // background-color: #f4f4f4;
        border: 0.267vw solid #e7eaf0;
        border-top-left-radius: 5.867vw;
        border-bottom-left-radius: 5.867vw;
        border-right: none;
      }
      span:nth-child(2) {
        padding-right: 20px;
        display: inline-block;
        height: 100%;
        // background-color: #f4f4f4;
        border: 0.267vw solid #e7eaf0;
        border-left: none;
        // border-radius: 22.001px;
        border-top-right-radius: 5.867vw;
        border-bottom-right-radius: 5.867vw;
      }
      img {
        width: 2.133vw;
        height: 1.867vw;
        vertical-align: middle;
        margin-left: 2.133vw;
      }
    }
    .item {
      height: 20vw;
      display: flex;
      margin-bottom: 4.533vw;
      .left {
        width: 26.667vw;
        height: 100%;
        margin-right: 3.733vw;
        flex-shrink: 0;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
          border-radius: 1.333vw;
          -webkit-appearance: none;
        }
        .lock {
          position: absolute;
          left: 2.667vw;
          top: 2.667vw;
          width: 5.333vw;
          height: 5.333vw;
        }
        .play {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 8vw;
          height: 8vw;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        overflow: hidden;
        .name {
          margin-bottom: 1.333vw;
          height: 5.867vw;
          font-size: 4.267vw;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 5.867vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .duration {
          height: 5.333vw;
          font-size: 3.733vw;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ced3e0;
          line-height: 5.333vw;
        }
      }
    }
  }

  .cloud-top,
  .cloud-left,
  .cloud-right {
    position: absolute;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
  }
  .cloud-top {
    left: 47.2vw;
    top: 0;
    width: 13.6vw;
    height: 4.267vw;
  }
  .cloud-left {
    left: -6.4vw;
    top: 18.933vw;
    width: 19.733vw;
    height: 6.133vw;
  }
  .cloud-right {
    right: -2.4vw;
    top: 5.6vw;
    width: 19.733vw;
    height: 6.133vw;
  }
}
.popup {
  .wrapper {
    padding: 0 8.533vw;
    background-color: #fff;
    position: relative;
    box-sizing: border-box;
    .title {
      text-align: center;
      margin-top: 6.4vw;
      font-size: 5.6vw;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 7.733vw;
      margin-bottom: 3.2vw;
    }
    .tips {
      font-size: 3.2vw;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fccf00;
      line-height: 4.533vw;
    }
    .content {
      width: 100%;
      height: 53.333vw;
      overflow-y: scroll;
      font-size: 3.2vw;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000000;
      // background-color: #fff;
      line-height: 5.333vw;
      // box-shadow: ;
      position: relative;
      // left: 8.533vw;
      // right: 8.533vw;
      z-index: 1;
    }
    .mask {
      position: absolute;
      bottom: 20.8vw;
      width: 71vw;
      height: 4vw;
      margin: 0 auto;
      overflow: hidden;
      z-index: 0;
      .bgc {
        position: absolute;
        top: 0;
        width: 100%;
        height: 8vw;
        border-radius: 50%;
        // background-color: red;
        overflow: hidden;
        // background-color: rgba(206, 211, 224, 1);
        background: linear-gradient(
          to bottom,
          rgba(206, 211, 224, 0.2) 0%,
          rgba(255, 255, 255, 0.9) 100%
        );
      }
    }
    .next {
      font-size: 4.8vw;
      line-height: 12.8vw;
      margin-top: 8vw;
      text-align: center;
      width: 70.933vw;
      height: 12.8vw;
      background: #0054a6;
      border-radius: 6.4vw;
      color: #fff;
    }
    .disableClick {
      pointer-events: none;
      margin-top: 8vw;
      line-height: 12.8vw;
      text-align: center;
      width: 70.933vw;
      height: 12.8vw;
      background: #ced3e0;
      border-radius: 6.4vw;
      color: #fff;
    }
  }
}
</style>